<template>
    <div class="home-container">
        <h1>欢迎来到首页</h1>
        <p>{{ message }}</p>
        <button @click="changeMessage">切换消息</button>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 响应式数据
const message = ref('这是Vue3的首页初始消息')
// 交互方法
const changeMessage = () => {
    message.value = message.value === '这是Vue3的首页初始消息'
        ? '消息已切换！🎉'
        : '这是Vue3的首页初始消息'
}
</script>

<style lang="less" scoped>
.home-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    text-align: center;

    h1 {
        color: #2c3e50;
        margin-bottom: 1.5rem;
    }

    p {
        font-size: 1.2rem;
        color: #476582;
        margin-bottom: 1rem;
    }

    button {
        padding: 0.5rem 1rem;
        background: #42b983;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
            background: #33a06f;
        }
    }
}
</style>